{% macro field(page,tag,value,type) %}
<style>
  .page {
    text-align: center;
    font-size: 12px;
    margin-top: 30px;
  }

  .page ul {
    display: inline-block;
  }

  .page ul li {
    background: #fff;
    float: left;
    border: 1px solid #db6d4c;
    margin-right: 10px;
  }

  .page ul li a {
    display: block;
    padding: 2px 6px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .page span {
    letter-spacing: 1px;
    display: inline-block;
    vertical-align: top;
    line-height: 20px;
    margin-right: 20px;
  }

  .page ul li:hover a,
  .page ul li a.is-active {
    background: #db6d4c;
    color: white;
  }
</style>
<div class="page">
  {% if page.total > 1 %}
  <span>每页{{page.pageNum}}条记录/共{{page.total}}条</span>
  {% endif %}
  <ul>

    <!-- <li><a href="#" class="is-active">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">>></a></li>
    <li><a href="#">17</a></li> -->

  </ul>

</div>

<script>
  (function () {
    var num = Math.ceil("{{page.total}}" / "{{page.pageNum}}")
    var currentPage = parseInt('{{page.currentPage}}')
    var html = ""
    /*总页码数：num；当前页：currentPage*/

    /*
      普通链接：`<li><a href="/memory/index?tag=3&page=${i}">${i}</a></li>`
      激活链接：`<li><a class="is-active" href="/memory/index?tag=3&page=${i}">${i}</a></li>`
      前进链接：`<li class="prev" ><a  href="/memory/index?tag=3&page=${Number('{{page.currentPage}}')-1}"><<</a></li>`
      后退链接：`<li class="next" ><a  href="/memory/index?tag=3&page=${Number('{{page.currentPage}}')+1}">>></a></li>`
      最后一页：`<li><a href="/memory/index?tag=3&page=${num}">${num}</a></li>`
    */
    //var arr = []
    // var tag = document.referrer.split('?')[1].split('=')[1].split('&')[0]
    var tag = "{{tag}}"
   
    
    for (var i = 1; i <= num; i++) {
      if(i > 10){break}
      var item =
        `<li><a class="${ i == currentPage ? 'is-active' : '' }" href="/memory/index?tag=${tag}&page=${i}">${i}</a></li>`
      html += item
    }
    $('.page ul').html(html)
    if (currentPage > 8 && num > 10) {
      html = ""
      for (var j = 1; j <= num; j++) {
        if (j >= currentPage - 7 && j <= currentPage + 2) {
          var item =
            `<li><a class="${ j == currentPage ? 'is-active' : '' }" href="/memory/index?tag=${tag}&page=${j}">${j}</a></li>`
          html += item
        }
      }
      $('.page ul').html(html)
    }

    if (currentPage > 1) {
      $('.page ul').prepend(`<li class="prev" ><a  href="/memory/index?tag=${tag}&page=${currentPage-1}"><<</a></li>`)
    }
    if (currentPage != num && num > 10) {
      $('.page ul').append(
        `<li class="next" ><a  href="/memory/index?tag=${tag}&page=${currentPage+1}">>></a></li><li><a href="/memory/index?tag={${tag}}&page=${num}">${num}</a></li>`
      )
    }


    /*
    [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]
    */

  })()
</script>
{% endmacro %}